<script setup>

import {onMounted, ref} from "vue";
import api from "./api.js";

const list = ref([]);

function getDeviceList() {
  api.list().then((response) => {
    list.value = response.data;
  })
}

async function handleRead(row) {
  await api.inventory(row.uuid);
}

async function handleStopRead(row) {
  await api.stopInventory(row.uuid);
}

onMounted(()=>{
  getDeviceList();
})

</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      设备列表：
    </div>

    <vxe-table :data="list">

      <vxe-column field="uuid" title="UUID"></vxe-column>
      <vxe-column field="lastActiveTime" title="上次激活时间"></vxe-column>
      <vxe-column field="status" title="状态"></vxe-column>
      <vxe-column type="expand" title="Socket连接">
        <template #content="{ row }">
          <div class="expand-wrapper">
            <vxe-table border :data="row.socketList">
              <vxe-column field="address" title="地址"></vxe-column>
            </vxe-table>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="200">
        <template #default="{ row }">
          <el-button link @click="handleRead(row)">读取</el-button>
          <el-button link @click="handleStopRead(row)">停止读取</el-button>
        </template>
      </vxe-column>
    </vxe-table>

  </div>
</template>

<style scoped>

</style>